<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">
	<title>练习</title>
	<script src="js/d3.v4.min.js" charset="utf-8"></script>
</head>

<body>

	<script>
		//创建高宽300的svg画布
		var width=300;
		var height=300;
		var svg=d3.select("body")
				.append("svg")
				.attr("height",height)
				.attr("width",width);
				
/*		//线性比例尺:scaleLinear()
		var dataset = [ 0.1,0.5,0.6,1.3,2.5,2.0];
		var min=d3.min(dataset);
		var max=d3.max(dataset);
		var linear=d3.scaleLinear()
				   .domain([min,max])
				   .range([0,300]);
		console.log(linear(0.1));	//返回0
		console.log(linear(2.5));	//返回300
		console.log(linear(1.0));	//返回112.5*/
		
/*		//指数比例尺:scalePow()
		var powerScale=d3.scalePow()
						 .exponent(0.5)
						 .domain([0,100])
						 .range([0,30]);
		console.log(powerScale(0));//返回0			 
		console.log(powerScale(30));//返回16.4316
		console.log(powerScale(50));//返回21.213
		console.log(powerScale(100));//返回30*/
		
/*		//对数比例尺:scaleLog()
		var scaleLog=d3.scaleLog()
					   .domain([10,100000])
					   .range([0,600]);
		console.log(scaleLog(10));//返回0
		console.log(scaleLog(100));//返回150
		console.log(scaleLog(1000));//返回300
		console.log(scaleLog(10000));//返回450
		console.log(scaleLog(100000));//返回600*/
		
		//量化比例尺：scaleQuantize
/*		var scaleQuantize=d3.scaleQuantize()
							.domain([0,100])
							.range(["red","yellow","blue","green","black"]);
		console.log(scaleQuantize(15));//输出red
		console.log(scaleQuantize(30));//输出yelow
		console.log(scaleQuantize(50));//输出blue
		console.log(scaleQuantize(60));//输出green
		console.log(scaleQuantize(85));//输出black*/
		
/*		//序数比例尺:scaleOrdinal()
		var dataset=[0,1,2,3,5];
		var fruit=["apple","orange","mango","banana","pear"];
		var ordinal=d3.scaleOrdinal()
					.domain(dataset)
					.range(fruit);
		console.log(ordinal(0));	//返回apple
		console.log(ordinal(5));	//返回pear
		console.log(ordinal(3));	//返回banana
		console.log(ordinal(2.5));	//返回apple*/
/*		//序数比例尺:scaleBand()
		var fruit=["apple","orange","mango","banana","pear"];
		var outband=[0,100]
		var band=d3.scaleBand()
				 .domain(fruit)
				 .range(outband);
		console.log(band("apple"));		//返回0
		console.log(band("orange"));	//返回20
		console.log(band("mango"));		//返回40
		console.log(band("banana"));	//返回60
		console.log(band("pear"));		//返回80
		console.log(band("grape"));		//返回undefined*/
		
/*		//颜色比例尺
		var color1=d3.scaleOrdinal(d3.schemeCategory10);
		var color2=d3.scaleOrdinal(d3.schemeCategory20);
		var color3=d3.scaleOrdinal(d3.schemeCategory20b);
		var color4=d3.scaleOrdinal(d3.schemeCategory20c);
		console.log(color1(1));//返回"#1f77b4"
		console.log(color2(11));//返回"#1f77b4"
		console.log(color3(1));//返回"#393b79"
		console.log(color4(1));//返回"#3182bd"*/
	</script>

	
	
</body>

</html>